<template>
    <div class="filter-container">
        <el-row>
            <el-col :span="4">
                <div style="color:white;">1</div>
            </el-col>
            <el-col :span="14">
                <el-input @keyup.enter.native="handleFilter" style="width: 80%;" class="filter-item" :placeholder="placeholder" v-model="keywords">
                </el-input>
                <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">
                    搜索
                </el-button>
            </el-col>
            <el-col v-if="!isShow" :span="2">
                <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="success" icon="el-icon-plus">添加
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import waves from '@/directive/waves' // 水波纹指令
    export default {
        name: 'search',
        directives: {waves},
        props: {
            searchText: String,
            placeholder:String,
            isShow:String
        },
        data() {
            return {
                keywords: this.searchText//子组件的值会变化, 不改变父组件的值重新赋值
            }
        },
        created(){
            console.log(this.placeholder)
        },
        methods:{
            handleFilter(val){
                console.log(this.keywords);
                console.log(val);
                this.$emit('doSearch',this.keywords);
            },
            handleCreate(){
                this.$emit('handleCreate');
            }
        }
    }
</script>

